<template>
  <div class="schema-editor">
    <div class="json-box">
      <div class="json-box-item">
        <div class="json-box-top flex-justify-between">
          <span class="font-size-14">{{title}}</span>
          <p>
            <el-button size="mini" @click="previewJson">{}JSON Schema</el-button>
            <el-button size="mini">通过JSON等生成</el-button>
          </p>
        </div>
        <div class="json-box-bottom">
          <div class="nodes-container">
            <schema-node
              :node="nodes"
              :depth="0"
              @update="handleUpdate"
              @delete="handleDelete"
            />
          </div>
        </div>
      </div>
    </div>
    <!--json预览-->
    <el-dialog
      title="JSON Schema"
      :visible.sync="previewJsonDialog"
      :close-on-click-modal="false"
      width="800px"
      center>
      <CodeEditor v-model="jsonSchema" class="mar-top"></CodeEditor>
    </el-dialog>
  </div>
</template>

<script>
  import SchemaNode from './SchemaNode.vue'
  import {generateUID, parseSchema, convertToSchema} from "@/utils";
  import CiteList from "@/components/IDE/CiteList.vue";
  import CodeEditor from "@/components/IDE/CodeEditor.vue";

  export default {
    components: {CodeEditor, CiteList, SchemaNode},
    props: {
      title: {
        type: String,
        default: '请求参数'
      },
      schema: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        nodes: {
          id: generateUID(),
          type: 'object',
          title: '',
          filed: '根节点',
          xMock: '',
          description: '',
          isRoot: true,
          children: []
        },
        previewJsonDialog: false,
        jsonSchema: '',

      }
    },
    watch: {
      schema: {
        handler(newVal) {
          console.log(newVal)
          if (newVal) {
            if (Object.keys(newVal).length === 0) {
              this.nodes = {
                id: generateUID(),
                type: 'object',
                title: '',
                filed: '根节点',
                xMock: '',
                description: '',
                isRoot: true,
                children: []
              }
            } else {
              const jsonString = JSON.stringify(newVal);
              console.log('jsonString', jsonString)
              this.nodes = parseSchema(jsonString)
              console.log('nodes', this.nodes)
            }
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleUpdate(updatedNode) {
        this.nodes = updatedNode
      },
      handleDelete(nodeId) {
        this.deleteNodeRecursively(this.nodes.children, nodeId);
      },
      exportSchema() {
        console.log('导出Schema', this.nodes)
        const schema = convertToSchema(this.nodes);
        this.jsonSchema = JSON.stringify(schema, null, 2);
        return schema;
        // 实际项目中可以添加下载逻辑
      },
      //将schema转换为节点树
      previewJson() {
        this.previewJsonDialog = true
        this.exportSchema()
      },
      //遍历删除
      deleteNodeRecursively(nodes, targetId) {
        nodes.forEach((node, index) => {
          if (node.id === targetId) {
            nodes.splice(index, 1);
          } else if (node.children) {
            this.deleteNodeRecursively(node.children, targetId);
          }
        });
        return nodes;
      },

    }
  }
</script>

<style scoped>
  .editor-toolbar {
    margin-bottom: 20px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
  }

  .btn-add {
    background: #409eff;
    color: white;
  }

  .btn-export {
    background: #67c23a;
    color: white;
  }

  .nodes-container {
    border: 1px solid #ebeef5;
    padding: 20px;
    border-radius: 4px;
  }

  .json-box {

    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    .json-box-item {
      border: 1px solid #DADCE5;

      .json-box-top {
        padding: 2px 5px;
        height: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #DADCE5;
      }

      .json-box-bottom {
        padding: 10px;
        box-sizing: border-box;
        min-height: 200px;
        max-height: 300px;
        overflow: auto;
      }
    }

  }

</style>
